import React from "react";
import {Button, Drawer, Flex} from "antd";
import ThemeChanger from "@/components/SettingDrawer/ThemeChanger.tsx";
import MenuHr from "@/components/SettingDrawer/MenuHr.tsx";
import MenuH3 from "@/components/SettingDrawer/MenuH3.tsx";
import BackgroundImageChanger from "@/components/SettingDrawer/BackgroundImageChanger.tsx";
import {useNavigate} from "react-router";

interface SettingDrawerProps {
    open: boolean,
    position: "left" | "right",
    onClose: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent) => void
}

// 主题设置菜单抽屉
const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
    const {open, position, onClose} = props
    const navigate = useNavigate()

    return (
        <Drawer
            open={open}
            placement={position}
            onClose={(e) => {
                onClose(e)
            }}
            styles={{
                mask: {
                    backgroundColor: "transparent",
                },
            }}
            getContainer={false}
        >
            <MenuH3>设置主题</MenuH3>
            <ThemeChanger/>
            <MenuHr/>
            <MenuH3>控制背景图</MenuH3>
            <BackgroundImageChanger/>
            <MenuHr/>
            <Flex
                gap={20}
            >
                <Button
                    onClick={() => {
                        localStorage.clear()
                    }}
                >清除本地缓存</Button>
                <Button
                    onClick={() => {
                        navigate("/")
                    }}
                >
                    返回登录页
                </Button>
            </Flex>
        </Drawer>
    )
}

export default SettingDrawer
